<template>
  <div class='news-tabs'>
    <p><span v-for="(item, index) in modelData" @click="changeNews(item)" :class="{active:item.value==activeName,hover:true}" :key="index">{{item.label}}</span></p>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      activeName:"1",
      modelData:[
        {value:"0",label:"风类资讯"},
        {value:"1",label:"水类资讯"},
        {value:"2",label:"电类资讯"},
        {value:"3",label:"消防资讯"},
      ],
      listData:[{}]
    };
  },
  methods: {
    changeNews(item){
      this.$set(this,"activeName",item.value)
        this.$emit("iactiveName",item.value)
    },
    init(){

    },
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  }
};
</script>
<style lang="scss" scoped>
.news-tabs {
  width: 1200px;
  margin: 20px auto;
  margin-bottom: 0;
  font-size: 20px;

  p{
    display: flex;
    border-bottom: 1px solid #f2f2f2;

    span{
      line-height: 45px;
      margin-right: 30px;
      border-bottom: 2px solid transparent;
      padding: 0 10px;
    }
    span.active{
      border-color: $blue;
      color: $blue;
    }
  }
}
</style>